<template>
	<view class="device-allocated-layout">
		<xh-input showTitle title="选择代理商" placeholder="请选择" isSelect inputTextAlign="right" v-model="formParams.selectAgent.agentName" @didSelect="showSelectAgent"></xh-input>
		<xh-input showTitle title="选择政策" placeholder="请选择" isSelect inputTextAlign="right" v-model="formParams.selectPolicy.policyName" @didSelect="showSelectPolicy"></xh-input>
		<view class="device-allocated-header">货款信息</view>
		<xh-input showTitle title="选择机具" placeholder="请选择" isSelect inputTextAlign="right" @didSelect="showSelectDevice" v-model="formParams.selectDeviceCount"></xh-input>
		<view class="list-cell">
			<text>机具总价</text>
			<text>{{totalAmount}}</text>
		</view>
		<view class="submit-btn" style="margin-top: 50rpx;" @tap="submit">确认划拨</view>
	</view>
</template>

<script setup>
	import { onLoad, onUnload } from '@dcloudio/uni-app'
	import { computed, ref } from 'vue'
	import { deviceTransfer,deviceCallback } from '@/common/api/api.js'
	const props = defineProps(['type'])
	const formParams = ref({
		// 选择的代理商
		selectAgent:{},
		// 选择的政策
		selectPolicy:{},
		// 选择的机具
		selectDevices:[],
		// 显示已选择机具数
		selectDeviceCount:''
	})
	// 机具总价
	const totalAmount = computed(()=>{
		let total = 0
		formParams.value.selectDevices.forEach(item=>{
			total += item.termAmount
		})
		return `${total}元`
	})
	
	// 选择代理商
	const showSelectAgent = () => {
		uni.navigateTo({
			url: '/pages/home/device-manager/device-allocated/select-agent/select-agent'
		})
	}
	// 选择政策
	const showSelectPolicy = () => {
		if(!formParams.value.selectAgent.agentId){
			uni.$utils.showToast('请选择代理商')
			return
		}
		const data = encodeURIComponent(JSON.stringify(formParams.value.selectAgent))
		uni.navigateTo({
			url: `/pages/home/device-manager/device-allocated/select-policy/select-policy?data=${data}`
		})
	}
	// 选择机具
	const showSelectDevice = () => {
		if(!formParams.value.selectAgent.agentId){
			uni.$utils.showToast('请选择代理商')
			return
		}
		else if(!formParams.value.selectPolicy.policyId){
			uni.$utils.showToast('请选择政策')
			return
		}
		uni.navigateTo({
			url:`/pages/home/device-manager/device-allocated/select-device/select-device?type=${props.type}&agentId=${formParams.value.selectAgent.agentId}&policyId=${formParams.value.selectPolicy.policyId}`
		})
	}
	// 确认划拨/回拨
	const submit = async () => {
		if(!formParams.value.selectAgent.agentId){
			uni.$utils.showToast('请选择代理商')
			return
		}
		else if(!formParams.value.selectPolicy.policyId){
			uni.$utils.showToast('请选择政策')
			return
		}
		else if(formParams.value.selectDevices.length == 0){
			uni.$utils.showToast('请选择机具')
			return
		}
		let params = {}
		params.agentId = formParams.value.selectAgent.agentId
		const ids = formParams.value.selectDevices.map(item=>item.id)
		params.deviceTermIdList = ids
		if(props.type == '划拨'){
			await deviceTransfer(params)
			uni.$utils.showToast('划拨成功')
			uni.navigateBack()
		}
		else{
			await deviceCallback(params)
			uni.$utils.showToast('回拨成功')
			uni.navigateBack()
		}
	}
	// 移除通知
	const clearNotification = ()=>{
		uni.$off('selectAgent')
		uni.$off('selectPolicy')
		uni.$off('selectDevice')
	}
	onLoad(() => {
		uni.setNavigationBarTitle({
			title:`机具${props.type}`
		})
		clearNotification()
		// 选择代理商回调
		uni.$on('selectAgent', (res) => {
			formParams.value.selectAgent = res
			formParams.value.selectPolicy = []
			formParams.value.selectDevice = []
		})
		// 选择政策回调
		uni.$on('selectPolicy', (res) => {
			console.log(res)
			formParams.value.selectPolicy = res
			formParams.value.selectDevices = []
		})
		// 选择机具回调
		uni.$on('selectDevice', (res) => {
			console.log(res)
			formParams.value.selectDevices = res
			if(formParams.value.selectDevices.length == 0){
				formParams.value.selectDeviceCount = ''
			}
			else{
				formParams.value.selectDeviceCount = `已选择${formParams.value.selectDevices.length}台`
			}
		})
	})
	onUnload(() => {
		clearNotification()
	})
</script>

<style lang="scss" scoped>
	.device-allocated-layout {
		.device-allocated-header {
			padding: 30rpx;
		}
		.list-cell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			height: 100rpx;
			padding: 0 30rpx;
			background-color: #ffffff;
		}
	}
</style>